<template>
  <div class="com-container" @dblclick="revertMap">
    <div class="com-chart" ref="map_ref">111</div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import《组件名称》from'《组件路径》';
import axios from "axios";
import { getProvinceMapInfo } from "@/utils/map_utils";
import { mapState } from "vuex";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {
      chartEntity: null,
      allData: null,
      mapData: {},
    };
  },
  // 计算属性,类似于data概念,有缓存效果,用于不经常修改的数据
  computed: {
    ...mapState(["theme"]),
  },
  // 监控data中的数据变化
  watch: {
    theme() {
      // 销毁当前图表
      this.chartEntity.dispose();
      this.initChart();
      this.screenAdapter();
      this.updateChart();
    },
  },
  // 方法集合
  methods: {
    // 初始化echart
    async initChart() {
      this.chartEntity = this.$echarts.init(this.$refs.map_ref, this.theme);
      let ret = await axios.get("http://localhost:8999/static/map/china.json");
      this.$echarts.registerMap("china", ret.data);
      let option = {
        title: {
          text: "商家分布",
          left: 20,
          top: 20,
        },
        geo: {
          type: "map",
          map: "china",
          top: "5%",
          bottom: "5%",
          itemStyle: {
            borderColor: "#333",
          },
        },
        legend: {
          left: "5%",
          bottom: "5%",
          orient: "vertical",
        },
      };
      this.chartEntity.setOption(option);
      this.chartEntity.on("click", async (arg) => {
        let province = getProvinceMapInfo(arg.name);
        if (province.key) {
          if (!this.mapData[province.key]) {
            let ret = await axios.get("http://localhost:8999" + province.path);
            this.mapData[province.key] = ret.data;
            this.$echarts.registerMap(province.key, ret.data);
          }

          let changeOption = {
            geo: { map: province.key },
          };
          this.chartEntity.setOption(changeOption);
        }
      });
    },
    // 获得数据
    getData(ret) {
      // let { data: ret } = await this.$http.get("map");
      this.allData = ret;
      // 刷新图表
      this.updateChart();
    },
    // 更新图表
    updateChart() {
      let legendArr = [];
      let seriesArr = this.allData.map((item) => {
        legendArr.push(item.name);
        // return的这个对象就代表的是一个类别下的所有散点数据
        return {
          type: "effectScatter",
          rippleEffect: {
            scale: 5,
            brushType: "stroke",
          },
          name: item.name,
          data: item.children,
          coordinateSystem: "geo",
        };
      });
      let dataOption = {
        legend: {
          data: legendArr,
        },
        series: seriesArr,
      };
      this.chartEntity.setOption(dataOption);
    },
    // 根据屏幕大小调整分辨率
    screenAdapter() {
      let title_font_size = (this.$refs.map_ref.offsetWidth / 100) * 3.6;
      let adapterOption = {
        title: {
          textStyle: {
            fontSize: title_font_size,
          },
        },
        legend: {
          itemWidth: title_font_size / 2,
          itemHeight: title_font_size / 2,
          itemGap: title_font_size,
          textStyle: {
            fontSize: title_font_size / 2,
          },
        },
      };

      this.chartEntity.setOption(adapterOption);
      this.chartEntity.resize();
    },
    revertMap() {
      let revertOption = {
        geo: {
          map: "china",
        },
      };
      this.chartEntity.setOption(revertOption);
    },
  },
  beforeCreate() {}, // 生命周期-创建之前
  created() {
    this.$socket.registerCallBack("map", this.getData);
  }, // 生命周期-创建完成（可以访问当前this实例）
  beforeMount() {}, // 生命周期-挂载之前
  mounted() {
    this.initChart();
    // this.getData();
    this.$socket.send({
      action: "getData",
      socketType: "map",
      chartName: "map",
      value: "",
    });
    // 不要在函数中加(), 否则只会调用一次
    window.addEventListener("resize", this.screenAdapter);
    // 加载完成后自动适配分辨率
    this.screenAdapter();
  }, // 生命周期-挂载完成（可以访问DOM元素）
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  beforeUpdate() {}, // 生命周期-更新之前
  updated() {}, // 生命周期-更新之后
  beforeDestroy() {}, // 生命周期-销毁之前
  destroyed() {
    // 销毁自适应
    window.removeEventListener("resize", this.screenAdapter);

    this.$socket.unRegisterCallBack("map");
  }, // 生命周期-销毁完成
};
</script>

<style scoped>
</style>
